<template>
    <div class="currency-box">
        <div class="left">
            <header>
                <div class="search">
                    <a-input v-model="sourceSearch.keyWord" allowClear @keyup.enter.native="upSource" />
                </div>
                <div class="icon" @click="addFun">
                    <a-icon type="plus" />
                </div>
            </header>
            <section infinite-scroll-immediate-check="false" infinite-scroll-listen-for-event="false"
                v-infinite-scroll="handleinfiniteOnLoad" infinite-scroll-disabled="busy" infinite-scroll-distance="40">
                <ul v-for="(item) in sourceList" :key="item.DataSourceID" @click="checkSource(item)"
                    :class="[item.DataSourceID == sourceID ? 'section-active' : '', 'section-box']">
                    <li class="section-box-info">
                        {{ item.DataSourceName }}</li>
                    <li class="section-box-tip" v-show="item.DataSourceID == sourceID">
                        <list-handle :item="item" :editShow="true" :delShow="true" @edit="editFun"
                            @del="delFun"></list-handle>
                    </li>
                </ul>
            </section>
        </div>
        <div class="right">
            <div class="content-offside">
                <header class="offside-header flex-about flex-alignment">
                    <h3>数据源字段列表</h3>
                    <a-form layout="inline">
                        <a-form-item label="查找">
                            <a-input v-model="dataFieldSearch.keyWord" />
                        </a-form-item>
                        <a-form-item>
                            <a-button :disabled="!sourceID" class="default-button" @click="serachDataField">
                                查询
                            </a-button>
                        </a-form-item>
                        <a-form-item>
                            <a-button :disabled="!sourceID" class="default-button" @click="addDataFieldFun"> 添加 </a-button>
                        </a-form-item>

                    </a-form>
                </header>
                <section class="offside-section" id="Source">
                    <a-table :columns="dataFieldColums" :row-key="(record) => record.dataFieldID"
                        :data-source="dataFieldList" :scroll="{ y: tableHNum }" :pagination="dataPagination" size="middle"
                        @change="pagChang">
                        <template slot="name" slot-scope="name">
                            {{ name }}
                        </template>
                        <template slot="action" slot-scope="text, record">
                            <div class="chart-manage">
                                <a-icon type="delete" class="icon-class" @click="delDataField(record)" />
                            </div>
                        </template>
                    </a-table>
                </section>
            </div>
        </div>
        <data-source-form :show.sync="sourceShow" :listInfo="sourceData" @renewList="upSource"
            :isEdit="sourceIsEidt"></data-source-form>
        <dataField-form :show.sync="dataFieShow" :listInfo="dataFieInfo" @renewList="serachDataField"></dataField-form>
    </div>
</template>

<script>
import { getDataSources, deleteDataSource } from '@/api/DataSource'
import { getDataFields, deleteDataField } from '@/api/DataField'
import ListHandle from '@/components/list-operate-box.vue'
import DataSourceForm from './childern/data-source-modal.vue'
import dataFieldColums from "./columsList/dataFieldColums"; //表头数据
import DataFieldForm from './childern/data-field-modal.vue'
export default {
    name: "DataSourceSetup",
    components: {
        ListHandle,
        DataSourceForm,
        DataFieldForm
    },
    data() {
        return {
            sourceSearch: {
                pageRequestModel: {
                    pageIndex: 1,
                    pageSize: 30
                },//分页数据
                keyWord: null,//查询字段
            },//数据源查询
            sourceList: [],//数据源列表
            sourceData: {},//数据源选中项
            sourceID: null,//当前选中数据源ID
            sourceShow: false,//数据源操作弹窗显示
            sourceIsEidt: false,//是否修改数据源
            busy: true,//滚动触底方法
            dataFieldSearch: {
                pageRequestModel: {
                    pageIndex: 1,
                    pageSize: 10
                },//分页数据
                keyWord: null,//查询字段
            },//数据源字段查询
            dataFieldColums,//字段表头
            dataFieldList: [],//数据源字段列表
            dataFielRowKeys: [],//选中数据源字段
            tableHNum: 0,//表格滚动高度
            dataPagination: {
                size: "large",
                total: 0,
                defaultPageSize: 10,
                showSizeChanger: true,
                pageSizeOptions: ["10", "20", "30", "40", "50"],
            }, //分页参数
            dataFieShow: false,//数据源字段显示
            dataFieInfo: {},//数据源字段信息
        }
    },
    methods: {
        //分页点击
        pagChang(pagination) {
            let { current, pageSize } = pagination;
            this.dataFieldSearch.pageRequestModel.pageIndex = current;
            this.dataFieldSearch.pageRequestModel.pageSize = pageSize;
            this.getDataFieldsFun();
        },
        //滚动方法
        handleinfiniteOnLoad() {
            this.busy = true;
            setTimeout(() => {
                this.sourceSearch.pageRequestModel.pageIndex += 1;
                this.getDataSourcesFun();
            }, 1000);
        },
        /* 查询数据源  查询到赋值数据源列表及数据源项 */
        async getDataSourcesFun() {
            let res = await getDataSources(this.sourceSearch)
            this.sourceList = this.sourceList.concat(res.Data.Data)
            if (this.sourceList.length != 0) {
                this.sourceData = this.sourceList[0];
                this.sourceID = this.sourceData.DataSourceID
                this.dataFieldSearch.DataSourceID = this.sourceID
                this.getDataFieldsFun();
            }
            if (res.Data.Data.length == 0) {
                this.busy = true;
            } else {
                this.busy = false;
            }
        },
        /* 选择数据源 */
        checkSource(item) {
            this.sourceData = item;
            this.sourceID = item.DataSourceID
            this.dataFieldSearch.DataSourceID = this.sourceID
            this.getDataFieldsFun();
        },
        /* 更新数据源 */
        upSource() {
            this.sourceSearch.pageRequestModel.pageIndex = 1;
            this.sourceList = [];
            this.getDataSourcesFun();
        },
        /* 新增数据源 */
        addFun() {
            this.sourceData = JSON.parse(JSON.stringify({
                DataSourceName: null,
                DataSourceDesc: null,
            }));
            this.sourceIsEidt = false
            this.sourceShow = true
        },
        /* 修改数据源 */
        editFun(item) {
            this.sourceData = JSON.parse(JSON.stringify(item))
            this.sourceIsEidt = true
            this.sourceShow = true
        },
        /* 删除数据源 */
        delFun(item) {
            const _this = this;
            this.$confirm({
                title: `删除数据源【${item.DataSourceName}】?`,
                okText: "确认",
                okType: "danger",
                cancelText: "取消",
                async onOk() {
                    let res = await deleteDataSource(item)
                    _this.$message.success('删除成功')
                    _this.upSource();
                },
                onCancel() { },
            });
        },
        /* 查询字段列表 */
        async getDataFieldsFun() {
            let res = await getDataFields(this.dataFieldSearch);
            let { pageIndex, pageSize } = this.dataFieldSearch.pageRequestModel;
            res.Data.Data.map((item, index) => {
                item.dataFieNum = (pageIndex - 1) * pageSize + index + 1;
            })
            this.dataFieldList = res.Data.Data
            this.dataPagination.total = res.Data.TotalNumber
        },
        /* 查询字段*/
        serachDataField() {
            this.dataFieldSearch.pageRequestModel.pageIndex = 1;
            this.dataFieldSearch.pageRequestModel.pageSize = 10;
            this.getDataFieldsFun();
        },

        /* 新增字段*/
        addDataFieldFun() {
            this.dataFieShow = true;
            this.dataFieInfo = {
                DataFieldName: null,
                DataFieldDesc: null,
                DataSourceID: this.sourceID
            }
        },
        /* 修改字段*/
        editDataField() { },
        /* 删除字段*/
        delDataField(item) {
            const _this = this;
            this.$confirm({
                title: `删除数据源【${item.DataFieldName}】?`,
                okText: "确认",
                okType: "danger",
                cancelText: "取消",
                async onOk() {
                    let res = await deleteDataField(item)
                    _this.$message.success('删除成功')
                    _this.serachDataField();
                },
                onCancel() { },
            });
        },

    },
    mounted() {
        this.getDataSourcesFun();
    },
    updated() {
        this.$nextTick(() => {
            if (document.getElementById("Source")) {
                this.tableHNum = document.getElementById("Source").offsetHeight - 140;
            }

        })

    },
}
</script>

<style lang="less" scoped>
.offside-header {
    h3 {
        margin: 0 !important;
    }
}
</style>